<template>
<a-tooltip v-bind="{
      placement: 'bottom',
      ...(typeof action.tooltip == 'string')?{
        title: action.tooltip
      }: action.tooltip
    }">
    <a-popconfirm v-if="action.popConfirm" 
    :disabled="action.disabled"
    v-bind="action.popConfirm"
    @confirm="action.popConfirm.confirm($event, data)"
    @cancel="action.popConfirm.cancel?action.popConfirm.cancel($event, data): undefined"
    >
      <a-button 
        :type="action.type || 'link'"
        :disabled="action.disabled"
        v-bind="getBindButtonProps(action)"
        >{{action.label}}
        <template #icon v-if="action.icon">
          <m-icon :icon="action.icon"/>
        </template>
        </a-button>
     </a-popconfirm>
     <a-button 
        v-else
        :type="action.type || 'link'"
        :disabled="action.disabled"
        v-bind="getBindButtonProps(action)"
        >{{action.label}}
        <template #icon v-if="action.icon">
          <m-icon :icon="action.icon"/>
        </template>
        </a-button>
    </a-tooltip>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import { ActionItem } from './types';

const props = defineProps({
  action: {
    type: Object as PropType<ActionItem>,
    default () {
      return {} as ActionItem
    }
  },
  data: { // 当前行数据
    type: Object
  }
})
// 获取绑定按钮属性
const getBindButtonProps = (action: ActionItem) =>{
  let dynamicProps = {}
  if(action.dynamicProps && typeof action.dynamicProps == 'function') {
    dynamicProps = {
      ...action.dynamicProps(props.data),
    }
  }
  return {
    size: 'small',
    ...action.props,
    ...dynamicProps,
    onClick(e: any) {
      if(!action.popConfirm &&  action.onClick && typeof action.onClick === 'function') {
        action.onClick(e, props.data)
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>